{include file="public:header" /}
<div style="margin: 0 auto">
    <div class="page-header">
        <h2 class="text-center">用户注册</h2>
        <p class="col-md-4"></p>
        <br>
        <form class="form-horizontal" method="post" id="login">
            <div class="form-group">
                <label class="col-sm-4 control-label">姓名:</label>
                <div class="col-sm-4">
                    <input type="text" name="name" class="form-control"   placeholder="name">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-4 control-label">手机号:</label>
                <div class="col-sm-4">
                    <input type="text" name="tel" class="form-control" style="float: left;display: inline-block" id="tel" placeholder="tel">
                </div>
                <span id="warning"></span>
            </div>

            <div class="form-group">
                <label  class="col-sm-4 control-label">密码:</label>
                <div class="col-sm-4">
                    <input type="password" name="password" class="form-control" id="inputPassword4" placeholder="Password">
                </div>
            </div>

            <div class="form-group">
                <label  class="col-sm-4 control-label">确认密码:</label>
                <div class="col-sm-4">
                    <input type="password" name="confirm" class="form-control" id="confirm" placeholder="Confirm">
                </div>
                <span id="warning1"></span>

            </div>

            <div class="form-group">
                <div class="col-sm-offset-5 col-sm-8">
                    <button type="button" class="btn btn-primary disabled" id="button">注册</button>
                </div>
            </div>

            <div >
                <div class="col-sm-offset-5 col-sm-4">
                </div>
            </div>
        </form>

    </div>
</div>

<script type="text/javascript">
    $(function(){
        $("#tel").blur(function () {
            $.ajax({
                type: 'GET',
                url: 'checkRegisterTel',
                data:$('form').serialize(),
                dataType:'json',
                success:function (res) {
                    if (res.status == 1){
                        $('#warning').text(res.message)
                        // alert(res.message);
                    } else{
                        // alert(res.message)
                        $('#warning').text(res.message)
                    }
                }
            });
        });

        $("#confirm").change(function () {
            $.ajax({
                type: 'GET',
                url: 'checkRegisterConfirm',
                data:$('form').serialize(),
                dataType:'json',
                success:function (res) {
                    if (res.status == 1){
                        // alert(res.message);
                        $('#warning1').text(res.message)
                        $("button").removeClass('disabled');
                        // $("button").attr('id','button')
                    } else{
                        $('#warning1').text(res.message)
                    }
                }
            });
        });

        $('#button').on('click',function(){
            //用ajax提交用户信息
            $.ajax({
                type: 'post',
                url: "{:url('register')}",
                data: $('#login').serialize(),
                dataType: 'json',
                success: function(data){
                    switch (data.status)
                    {
                        case 1:  //注册成功跳到首页
                            alert(data.message);
                            window.location.href = "{:url('user/login')}";
                            break;
                        case 0:  //失败或验证不通过返回注册页
                        case -1:
                            alert(data.message);
                            window.location.back();
                            break;
                    }

                }
            })
        })
    })
</script>
{include file="public:footer" /}